<script setup lang="ts">
import type { EChartsOption } from 'echarts'

const props = withDefaults(defineProps<{
  data?: any[]
}>(), {
  data() {
    const rand = () => Math.ceil(Math.random() * 100)
    return [
      ['计量器具故障', rand()],
      ['网关采集故障', rand()],
      ['实时测点异常', rand()],
      ['统计指标异常', rand()],
    ]
  },
})

const chartOption = computed<EChartsOption>(() => {
  return {
    title: {
      text: '平均消除时间',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
      },
    },
    tooltip: {
      show: true,
    },
    grid: {
      containLabel: true,
      left: '6%',
      right: '15%',
      top: '70px',
      bottom: '20px',
    },
    xAxis: {
      type: 'category',
      name: '报警类型',
    },
    yAxis: {
      type: 'value',
      name: '分钟',
    },
    dataset: {
      source: props.data,
    },
    series: [
      {
        type: 'bar',
      },
    ],
  }
})
</script>

<template>
  <BChart :option="chartOption" />
</template>
